<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
// import echarts from 'echarts'
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    chartData: {
      type: Object,
      default() {
        return {
          xData: 30.25,
        };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));

      this.chart.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            type: "gauge", //类型：仪表盘图
            // name: "本月完成率",
            title: {
              offsetCenter: [0, "120%"], //系列标题文字（效果图中的“制造业”）的位置，第一个为横坐标，第二个为纵坐标
              // color: "#fff", //字体颜色
              fontSize: 16,
            },

            center: ["50%", "45%"], //仪表盘图的中心点相对于dom容器的位置
            detail: {
              //设置效果图中文字“30.25%”的相关配置
              formatter: "{value}%",
              offsetCenter: [0, 0],
              // color: "#FFF",
              fontSize: 14,
            },
            data: [
              {
                value: this.chartData.value, //此处要改数据
                name: this.chartData.name,
              },
            ],
            radius: "60%", //环形的大小
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [this.chartData.value / 100, this.chartData.bg], //占总数的30.25%，即value/100，颜色为'#1A8FC5'
                  [1, "#E1E8EE"], //基底大圈比例为1，颜色为'#E1E8EE'，
                ],
                width: 20, //环形的粗细
              },
            },
            splitLine: {
              show: false, //不显示分隔线
            },
            axisTick: {
              show: false, //不显示仪表盘刻度
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false, //不显示仪表盘指针
            },
          },
        ],
      });
    },
  },
};
</script>
